import styles from './index.module.less';

import { useEffect, useState } from 'react';
import { IPanelInfo } from '@/types';
import { getPanel } from '@/api/layout';

interface IProps {
  plHangNo: string;
}

export const PanelInfo = (props: IProps) => {
  const { plHangNo } = props;
  const [panelInfo, setPanelInfo] = useState<IPanelInfo>();

  useEffect(() => {
    const getData = async (plHangNo: string) => {
      const response = await getPanel(plHangNo);
      setPanelInfo(response.data);
    };

    if (plHangNo) {
      getData(plHangNo);
    }
  }, [plHangNo]);

  return (
    <div className={styles.container} style={{ display: panelInfo ? 'block' : 'none' }}>
      <div className={styles.title}>挂组信息</div>
      <div className={styles.item} style={{ left: 20, top: 70 }}>
        <div className={styles.itemLabel}>产线名称</div>
        <div className={styles.itemValue}>{panelInfo?.workName}</div>
      </div>
      <div className={styles.item} style={{ left: 200, top: 70 }}>
        <div className={styles.itemLabel}>规划挂组号</div>
        <div className={styles.itemValue}>{panelInfo?.plHangNo}</div>
      </div>
      <div className={styles.item} style={{ left: 20, top: 150 }}>
        <div className={styles.itemLabel}>FO条目数</div>
        <div className={styles.itemValue}>{panelInfo?.foNum}</div>
      </div>
      <div className={styles.item} style={{ left: 200, top: 150 }}>
        <div className={styles.itemLabel}>零件数量合计</div>
        <div className={styles.itemValue}>{panelInfo?.partInfo}</div>
      </div>
      <div className={styles.item} style={{ left: 20, top: 230 }}>
        <div className={styles.itemLabel}>挂组空间利用率</div>
        <div className={styles.itemValue}>{panelInfo?.hangUsageSpace}</div>
      </div>
    </div>
  );
};
